<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>首页</h1>
    <h2>学生信息</h2>
    <table border="1">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>专业</th>
        </tr>
        <!-- <tr>
            <td>9512101</td>
            <td>李勇</td>
            <td>男</td>
            <td>19</td>
            <td>计算机系</td>
        </tr>
        <tr>
            <td>9512101</td>
            <td>李勇</td>
            <td>男</td>
            <td>19</td>
            <td>计算机系</td>
        </tr>
        <tr>
            <td>9512101</td>
            <td>李勇</td>
            <td>男</td>
            <td>19</td>
            <td>计算机系</td>
        </tr> -->

    </table>
</body>
</html>
<script>

    // ajax 

    // 1、实例化一个ajax对象
    let  xhr=new XMLHttpRequest()
    console.log(xhr);

    // 2、打开某个连接：配置请求参数
    // xhr.open(请求方法,请求地址)
    xhr.open("get","http://localhost:3000/students")



    // 3、发送请求
    xhr.send()
  


    // 4、监听：on 监听ajax请求状态的改变
    // readystate  ajax请求的状态
    xhr.onreadystatechange=function(){
        console.log( xhr.readyState  );

        if( xhr.readyState ==4){
                // 得到结果
            console.log(JSON.parse(xhr.responseText));
        }
    }   


    // - 0：请求未初始化，还没有调用open
    // - 1：请求已经建立，但是还没有发送send 
    // - 2：请求已经发送 
    // - 3：请求正在处理中，通常响应中已经有部分数据可以用了 
    // - 4：响应已经完成，可以获取并使用服务器的响应 










</script>







<!--
跨域（不同的服务器）
跨域错误：ajax不能请求非本服务器上的资源（某服务器上的页面不能通过ajax请求其他服务器上的资源，只能通过ajax请求本服务器上的资源）


    
Access to XMLHttpRequest at 'http://localhost:3000/students' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


当在 null 这个服务器上使用ajax 请求 http://localhost:3000/students 这个资源时，被 CORS policy（跨域资源共享政策）阻止


Access to XMLHttpRequest at 'http://localhost:3000/students' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

当在 http://127.0.0.1:5500 这个服务器上使用ajax 请求 http://localhost:3000/students 这个资源时，被 CORS policy（跨域资源共享政策）阻止

-->